<template>
  <div>
    <el-form label-width="80px" style="height:508px">
      <el-row>

        <el-col :span="24" style="margin:5px 0">
          <el-button @click="previousPage" style="float:right;" type="success" plain
            icon="el-icon-arrow-left">返回</el-button>
        </el-col>
        <el-col :span="14">
          <el-form-item label="策略名称">
            <el-input v-model.trim="name" placeholder="请输入策略名称" disabled clearable></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22" style="margin:5px 0">
          <el-button type="primary" @click="addtableClick" style="float:right">新增</el-button>
        </el-col>
        <el-col :span="22">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="Class" label="放行设备类(Class)">
            </el-table-column>
            <el-table-column prop="Pid" label="产品ID(PID)">
            </el-table-column>
            <el-table-column prop="Vid" label="厂商ID(VID)">
            </el-table-column>
            <el-table-column prop="Comment" label="描述">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <!-- <el-button @click.native.prevent="editRow(scope.$index, tableData)" type="text" size="small">
                  编辑
                </el-button> -->
                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

      </el-row>
    </el-form>
    <el-dialog :title="dialogtitle" :visible.sync="dialogVisible" width="65%" @closed="handleClose">

      <el-form label-position="right" label-width="150px" :model="tableform" ref="tableform" :rules="rules">
        <el-row>
          <el-col :span="24">
            <el-form-item label="放行设备类(Class)" prop="Class">
              <el-select v-model="tableform.Class" clearable placeholder="请选择">
                <el-option v-for="item in classOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品ID(PID)">
              <el-input v-model="tableform.Pid" maxlength="4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="厂商ID(VID)">
              <el-input v-model="tableform.Vid" maxlength="4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否隐藏" prop="Hidden">
              <el-select v-model="tableform.Hidden" clearable placeholder="请选择">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述">
              <el-input v-model="tableform.Comment"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="addTerminal">提 交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </span>
  </div>
</template>

<script>
export default {
  name: "USBform",
  data() {
    return {
      classOptions: [
        { value: "01", label: "01(音频)" },
        { value: "02", label: "02(通讯)" },
        { value: "06", label: "06(图像)" },
        { value: "07", label: "07(打印机)" },
        { value: "08", label: "08(大容量存储)" },
        { value: "0A", label: "0A(通讯设备类)" },
        { value: "0B", label: "0B(智能卡)" },
        { value: "0E", label: "0E(视频)" },
        { value: "0F", label: "0F(个人健康设备)" },
        { value: "FF", label: "FF(厂商特定)" },
      ],
      dialogVisible: false,
      dialogtitle: "",
      name: {},
      tableData: [],
      tabindex: "", //第一个列表需要的下标
      tableform: {
        Comment: "",
        Class: "01",
        Vid: "",
        Pid: "",
        Hidden: "",
      },
      RegionAlarm: [],
      Regiondialogtitle: "",
      RegionVisible: false,
      Regionform: {
        RegionName: "",
        RegionIp: "",
        RegionPort: "",
      },
      Regionindex: "", //第二个列表需要的下标
      options: [
        {
          value: "0",
          label: "探测地址",
        },
        {
          value: "1",
          label: "报警地址",
        },
      ],
      rowData: {},
      paramForm: {},
      rules: {
        Class: [{ required: true, trigger: "change", message: "请选择类型" }],
        // Vid: [{ required: true, trigger: "blur", message: "请输入IP" }],
        // Pid: [{ required: true, trigger: "blur", message: "请输入名称" }],
        // Comment: [
        //   { required: true, trigger: "blur", message: "请输入描述信息" },
        // ],
      },
    };
  },
  created() {
    this.getRootDevList();
  },
  methods: {
    //返回上一页
    previousPage() {
      this.$router.go(-1);
    },
    getRootDevList() {
      this.rowData = this.$route.params;
      this.name = this.$route.params.name;
      this.tableData = this.$route.params.Root.UsbList.Usb;

      console.log(this.$route.params.Root, "sw");
    },
    //删除按钮
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //新增按钮
    addtableClick() {
      this.dialogtitle = "新增";
      this.dialogVisible = true;
    },
    //编辑
    editRow(index, row) {
      this.dialogtitle = "编辑";
      this.dialogVisible = true;
      console.log(index, "index");
      console.log(row, "row");
      this.tableform = JSON.parse(JSON.stringify(row));
      this.tabindex = index;
    },
    //取消按钮
    handleClose() {
      let form = "tableform";
      this.tableform = {
        Comment: "",
        Class: "01",
        Vid: "",
        Pid: "",
        Hidden: "",
      };
      this.$refs[form].resetFields(); //将form表单重置
      this.dialogVisible = false;
    },
    //页面提交
    onSubmit() {
      this.$refs.tableform.validate((valid) => {
        if (valid) {
          if (this.tableform.Pid == undefined || this.tableform.Pid == '') {
          this.$message({
            message: "Pid应由4位字母或数字组成",
            type: "warning",
          });
          return
        }
        if (this.tableform.Vid == undefined || this.tableform.Vid == '') {
          this.$message({
            message: "Vid应由4位字母或数字组成",
            type: "warning",
          });
          return
        }
        if (this.tableform.Pid.length != 4) {
          this.$message({
            message: "Vid应由4位字母或数字组成",
            type: "warning",
          });
          return
        }
        if (this.tableform.Vid.length != 4) {
          this.$message({
            message: "vid应由4位字母或数字组成",
            type: "warning",
          });
          return
        }
          let datas = {};
          if (this.tableData == null) {
            this.tableData = [];
          }
          datas.Comment = this.tableform.Comment;
          datas.Class = this.tableform.Class;
          datas.Vid = this.tableform.Vid;
          datas.Pid = this.tableform.Pid;
          datas.Hidden = this.tableform.Hidden;
          this.tableData.push(datas);
          this.$message({
            type: "success",
            message: "提交成功！",
          });
          this.handleClose();
        } else {
          return false;
        }
      });
    },
    //确 定
    addTerminal() {
      this.$confirm("确认要提交吗？", "提示", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {
          this.rowData.name = this.name;
          this.paramForm.policy = {
            Root: {
              UsbList: {
                Usb: this.tableData,
              },
            },
            creator: this.rowData.creator,
            enableTime: this.rowData.enableTime,
            name: this.name,
            state: this.rowData.state,
          };
          //this.$route.params.policy.Root.UsbList.Usb = this.tableData
          this.$postForJson("3in1/policy/usb_dev", this.paramForm).then(
            (jsonData) => {
              console.log(jsonData, "sss");
              this.$message({
                type: "success",
                message: "提交成功！",
              });
              this.$router.go(-1);
            }
          );
        })
        .catch((_) => {
          this.$message({
            type: "info",
            message: "已取消提交",
          });
        });
    },
    //重置
    resetForm() {
      this.$confirm("确认要重置吗？", "提示", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "重置成功！",
          });
        })
        .catch((_) => {
          this.$message({
            type: "info",
            message: "已取消重置",
          });
        });
    },
    //新增
    RegionAlarmClick() {
      this.Regiondialogtitle = "新增";
      this.RegionVisible = true;
    },
    //编辑
    RegioneditRow(index, row) {
      this.Regiondialogtitle = "编辑";
      this.RegionVisible = true;
      this.Regionform = JSON.parse(JSON.stringify(row));
      this.Regionindex = index;
    },
    RegiondeleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //立即创建
    RegionSubmit() {
      if (this.Regiondialogtitle == "新增") {
        this.RegionAlarm.push(this.Regionform);
        console.log(this.RegionAlarm);
      } else if (this.Regiondialogtitle == "编辑") {
        this.RegionAlarm[this.Regionindex] = this.Regionform;
        this.$set(this.RegionAlarm, this.Regionindex, this.Regionform);
      }
      this.$message({
        type: "success",
        message: "提交成功！",
      });
      this.RegionVisible = false;
    },
    RegionhandleClose() {
      this.Regionform = {
        RegionName: "",
        RegionIp: "",
        RegionPort: "",
      };
      this.RegionVisible = false;
    },
  },
};
</script>

<style scoped>
.el-form-item__content {
  margin-left: 90px !important;
}
</style>